<template>
  <div class="yaerbox">
    <div class="title">
      <p>年度游客量对比</p>
      <img src="../../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
let charts = ref();
// 组件挂载完毕初始化图形图标
onMounted(() => {
  let mychart = echarts.init(charts.value);
  // 设置配置项
  mychart.setOption({
    title: {
      text: "散点图",
      left: "40%",
      textStyle: {
        color: "white",
      },
    },
    xAxis: {
      type: "category",
      show: true,
    },
    yAxis: {
      show: false,
    },
    grid: {
      left: 20,
      top: 25,
      right: 0,
      bottom: 20,
    },
    series: {
      type: "scatter",
      data: [
        3123, 8448, 2111, 300, 4444, 3023, 444, 359, 1456, 2566, 254, 2044,
        4777,
      ],
      // 标记图形设置
      symbol: "diamond",
      symbolSize: 16,
      // 图文标签
      label: {
        show: true,
        position: "top",
        color: "yellowgreen",
      },
      // 散点图标记的颜色(支持渐变)
      itemStyle: {
        color: "pink",
      },
    },
  });
});
</script>

<style scoped lang="scss">
.yaerbox {
  width: 100%;
  height: 100%;
  background: url(../../../images/dataScreen-main-rb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  .title {
    margin-left: 20px;
    p {
      color: white;
      font-size: 20px;
    }
  }
  .charts {
    height: calc(100% - 30px);
  }
}
</style>
